<template>
  <div class="home">
    <div class="header">
      <div
        class="address_map"
        @click="$router.push({ name: 'address', params: { city: city } })"
      >
        <i class="fa fa-map-marker"></i>
        <span>{{ address }}</span>
        <i class="fa fa-sort-desc"></i>
      </div>
    </div>
    <!-- 根据 FilterView.vue 里点击的是第一个时才让 fixedview 生效 -->
    <div class="search_wrap" :class="{ fixedview: showFilter }">
      <div class="shop_search">
        <i class="fa fa-search"></i>
        搜索商家 商家名称
      </div>
    </div>
    <div id="container" style="height: 2000px">
      <!-- 轮播图 -->
      <van-swipe class="swiper" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(img, index) in swipeImgs" :key="index">
          <img :src="img" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 分类  -->
      <van-swipe class="entries" indicator-color="white">
        <van-swipe-item v-for="(entry, index) in entries" :key="index">
          <div class="foodentry" v-for="(item, key) in entry" :key="key">
            <div class="img_wrap">
              <img :src="item.image" alt />
            </div>
            <span>{{ item.name }}</span>
          </div>
        </van-swipe-item>
      </van-swipe>
      <!-- 推荐商家 -->
      <div class="shoplist-title">推荐商家</div>
      <FilterView
        :filterData="filterData"
        @searchFixed="showFiltersView"
        @update="update"
      />
    </div>
  </div>
</template>
<script>
import FilterView from "@/components/FilterView";
export default {
  name: "home",
  components: { FilterView },
  data() {
    return {
      swipeImgs: [],
      entries: [],
      filterData: null,
      showFilter: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      // banner & 商品父类
      // oldURL /api/profile/shopping
      this.$axios("/static/shopping.json")
        .then((res) => {
          this.swipeImgs = res.data.swipeImgs;
          this.entries = res.data.entries;
        })
        .catch((err) => {});

      // 推荐商品/商品排序
      // oldURL /api/profile/filter
      this.$axios("/static/filter.json")
        .then((res) => {
          this.filterData = res.data;
        })
        .catch((err) => {});
    },
    showFiltersView(isShow) {
      this.showFilter = isShow;
    },
    update(condition) {
      console.log("condition", condition);
    },
  },
  computed: {
    address() {
      return this.$store.getters?.address || "获取中...";
    },
    city() {
      return (
        this.$store.getters.location?.addressComponent?.city ||
        this.$store.getters.location?.addressComponent?.province ||
        "请选择"
      );
    },
  },
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.header,
.search_wrap {
  padding: 10px 16px;
  background-color: #009eef;
}
.header .address_map {
  color: #fff;
  font-weight: 700;
}
.address_map i {
  margin: 0 3px;
  font-size: 18px;
}
.address_map span {
  display: inline-block;
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.search_wrap {
  position: sticky;
  top: 0px;
  z-index: 999;
  box-sizing: border-box;
}
.search_wrap .shop_search {
  background: #fff;
  padding: 10px 0;
  border-radius: 4px;
  text-align: center;
  color: #aaa;
}
.swiper {
  height: 100px;
}
.swiper img {
  width: 100%;
  height: 100px;
}
.entries {
  background: #fff;
  height: 47.2vw;
  text-align: center;
  overflow: hidden;
}
.foodentry {
  width: 20%;
  float: left;
  position: relative;
  margin-top: 2.933333vw;
}
.foodentry .img_wrap {
  position: relative;
  display: inline-block;
  width: 12vw;
  height: 12vw;
}
.img_wrap img {
  width: 100%;
  height: 100%;
}
.foodentry span {
  display: block;
  color: #666;
  font-size: 0.32rem;
}
.shoplist-title {
  display: flex;
  justify-content: center;
  height: 9.6vw;
  line-height: 9.6vw;
  font-size: 16px;
  color: #333;
  background: #fff;
}
.shoplist-title:after,
.shoplist-title:before {
  display: block;
  content: "一";
  width: 5.333333vw;
  height: 0.266667vw;
  color: #999;
}
.shoplist-title:before {
  margin-right: 3.466667vw;
}
.shoplist-title:after {
  margin-left: 3.466667vw;
}
.fixedview {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
</style>